<template>
  <div id="app">
    <input type="text" v-model="inputValue">
    <button @click="handleSubmit">提交</button>
    <hr>
    <ul>
      <todo-item
        v-for="(item,idx) in list"
        :key="idx"
        :msg="item"
        :index="idx"
        @ddd="deleteItem"
      >

      </todo-item>
    </ul>
  </div>
</template>

<script>
// 引入的这里必须使用单引号
import TodoItem from './components/TodoItem'
export default {
  mounted() {
    // 使用this.$store.state.XXX可以直接访问到仓库中的状态
    console.log(this.$store.state.name);
  },
  components: {
    'todo-item': TodoItem
  },
  data () {
    return {
      inputValue: '',
      list: []
    }
  },
  // mounted(){  // 挂载事件
  //   console.log(this.$store.state.name)
  // },
  methods: {
    handleSubmit () {
      // console.log('submit...')
      this.list.push(this.inputValue)
      this.inputValue = ''
    },
    deleteItem (index) {
      this.list.splice(index, 1)
    }
  }
}
</script>

<style>

</style>
